<template>
  <div ref="chartInst" style="width: 100%; height: 350px"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'BarChartIndex',
  props: {
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      option: {
        // 设置柱状图颜色
        color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
        // 设置图表大小
        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        // 坐标轴指示器，坐标轴触发有效
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          // 坐标轴文字样式
          axisLabel: {
            fontSize: '12'
          },
          // 坐标轴默认线条样式
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          // 坐标轴文字样式
          axisLabel: {
            fontSize: '12'
          }
        },
        series: [
          {
            name: '人数',
            // 类型为柱状
            type: 'bar',
            // 修改所有柱子宽度
            barWidth: '20%',
            // 单个柱子样式
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 10
            },
            data: []
          }
        ]
      }
    }
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function () {
        this.init()
      }
    }
  },
  methods: {
    init() {
      try {
        this.option.series[0].data = Object.values(this.chartData)
        this.option.xAxis.data = this.chartData?.map((item) => item.name) || []
        this.chart = echarts.init(this.$refs.chartInst)
        this.chart.setOption(this.option)
      } catch (error) {}
    }
  }
}
</script>
